<template>
	<div id="firstone">
		<div class="firsthang">
			<el-button type="primary"
				@click="shadown=true"
				>新增角色</el-button>
		</div>
		<ul>
			<li>角色名称</li>
			<li>角色描述</li>
			<li>详情</li>
			<li>操作</li>
		</ul>
		<ul v-for="(item,key) in allroles"
			
			:key="key">
			<li>
				{{item.roleName}}
			</li>
			<li>
				{{item.roleDesc}}
			</li>
			<li>
				
			</li>
			<li>
				<el-button type="primary" @click="showdown=true,role=item">编辑角色</el-button>
				<el-button type="danger">删除角色</el-button>
			</li>
		</ul>
		<addfirstone :shadown="shadown"/>
		<bianji :showdown="showdown" :role=role></bianji>
	</div>
</template>

<script>
	import addfirstone from "./addfirstone"
	import bianji from "./bianji"
	export default{
		components:{addfirstone,bianji},
		data(){
			return {
				shadown:false,
				showdown:false,
				role:{}
			}
		},
		computed:{
			allroles(){
				
				return this.$store.getters.allroles;
			}
		},
		mounted(){
			this.$store.dispatch("loadallroles")
		},
		methods:{
			deleteRole(item){
	            if(item.roleName=="admin"){
	                 this.$alert('不能删除该角色', '警告', {
	                    confirmButtonText: '确定',
	                });
	            }else{
	                this.$http.post(this.$api.deleteRole,{_id:item._id})
	                .then((res)=>{
	                    this.$message({
	                        message: res.message,
	                        type: res.success?"success":"danger"
	                    });
	                    this.$store.dispatch("loadallroles",{api:this.$api.allRoles});
	                })
	            }
	        }
			
		},
		
	    created() {
	        this.$store.dispatch("loadallroles",{api:this.$api.allRoles});
	    }
	}
</script>

<style lang="scss" scoped>
	
	.firsthang{
		width: 100%;
		height: 50px;
		border: 1px solid #000;
		line-height: 50px;
		text-align: left;
		
	}
	#firstone ul {
		
		width: 100%;
		border: 1px solid #000;
		border-top:0;
		display: flex;
		flex-direction: row;
		list-style: none;
		li:first-child{
			width: 20%;
			height: 50px;
			line-height: 50px;
		}
		li:nth-of-type(2){
			width: 20%;
			height: 50px;
			border-left: 1px solid #000;
			line-height: 50px;
		}
		li:nth-of-type(3){
			width: 15%;
			height: 50px;
			border-left: 1px solid #000;
			line-height: 50px;
		}
		li:last-child{
			width: 45%;
			height: 50px;
			border-left: 1px solid #000;
			line-height: 50px;
		}
	}
</style>